<template>
  <div class="userbox">
    <div class="images"><img src="../../public/logo.jpg" alt="" /></div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit" @click="btnfn"
          >立即登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
import { LoginApi } from "../request/api";
export default {
  data() {
    return {
      username: "13000000000",
      password: "123456",
      //判断是否已经登录
      // ifLogined: false,
    };
  },
  created() {
    //判断LocalStorage是否有token
    // let token = loacalStorage.getItem("X-Nideshop-Token");
    // if (token) {
    //   //有token就是登录了
    //   this.ifLogined = true;
    //   let userInfo = JSON.parse(localStorage.getItem("userInfo"));
    //   this.username = userInfo.username;
  },
  methods: {
    onSubmit(values) {
      // console.log("submit", values);
    },
    btnfn() {
      LoginApi({ username: this.username, password: this.password }).then(
        (res) => {
          localStorage.setItem("token", res.data);
          //console.log(res.data);
          // 第一个页面
          // this.$router.push("/shopping");
          // 第2个我的客户页面
          this.$router.push("/personal");
        }
      );
    },
  },
};
</script>

<style lang = "less" scoped>
.userbox {
  width: 100%;
  background-color: #cfc;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
  .van-form {
    position: absolute;
    left: 15%;
    top: 50%;
    margin: auto;
    margin-top: 40px;
    .van-button {
      width: 240px;
      height: 60px;
      margin-top: 80px;
      border: 2px solid #000;
      font-size: 25px;
    }
  }
}
</style>